<template>
	<div class="project">
		<div class="project-close" @click="deleteProject">
			x
		</div>
		<div class="items">
			<div class="name">项目名称:</div>
			<div class="value">{{ item.name }}</div>
		</div>
		<div class="items">
			<div class="name">地址:</div>
			<div class="value address" title="打开文件目录" @click="openDir(item.path)">{{ item.path }}</div>
		</div>
		<div class="items">
			<div class="name">运行命令:</div>
			<div class="value script">
				<div class="script-btn" v-for="(btn, key) in item.scripts" :key="btn" @click="npmRun(btn, key)">{{ key }}</div>
				<div class="script-btn" @click="autoRun()">+自定义</div>
			</div>
		</div>
		<div class="items">
			<div class="name">快捷功能:</div>
			<div class="value script">
				<div class="script-btn" v-for="(btn, key) in quickTool" :key="btn.command" type="success" effect="dark" @click="quickRun(btn, btn.key)">{{ btn.name }}</div>
			</div>
		</div>
		<el-tabs type="border-card" v-model="runKey" v-if="npmRunList.length > 0">
			<el-tab-pane v-for="(tab, index) in npmRunList" :key="index" :label="tab.name" :name="tab.key">
				<CmdWindow :ref="'cmdWindow' + index" :runKey="tab.key" :path="item.path" :type="tab.type" @exitWindow="exitWindow" />
			</el-tab-pane>
		</el-tabs>
	</div>
</template>

<script>
import CmdWindow from './cmd-window.vue'
const exec = require('child_process').exec
export default {
	props: {
		item: {
			default: {},
			type: Object
		}
	},
	components: { CmdWindow },
	data() {
		return {
			runKey: '',
			npmRunList: [],
			quickTool: [
				{
					name: 'yarn依赖安装',
					key: 'yarn install'
				}
			]
		}
	},
	mounted() {},
	methods: {
		openDir(path) {
			const { shell } = require('electron').remote
			const isOpen = shell.openItem(path)
			if (!isOpen) {
				alert('打开失败，请检查路径是否正确')
			}
		},
		// 快捷功能添加
		quickRun(item, key) {
			if (
				this.npmRunList.find(item => {
					return item.key === `${key}`
				})
			) {
				this.$message.error('命令已在运行中，如需重新运行请结束')
				return
			}
			this.npmRunList.push({
				key: `${key}`,
				name: item.name
			})
			this.runKey = key
		},
		// 运行命令添加
		npmRun(script, key) {
			if (
				this.npmRunList.find(item => {
					return item.key === `yarn run ${key}`
				})
			) {
				this.$message.error('命令已在运行中，如需重新运行请结束')
				return
			}
			this.runKey = `yarn run ${key}`
			this.npmRunList.push({
				key: `yarn run ${key}`,
				name: key
			})
		},
		// 自定义命令
		autoRun() {
			const index = this.npmRunList.filter(item => {
				return item.type == 'auto'
			})
			this.npmRunList.push({
				key: 'auto' + (index.length + 1),
				type: 'auto',
				name: '自定义' + (index.length + 1)
			})
		},
		exitWindow(key) {
			const rowIndex = this.npmRunList.findIndex(item => {
				return item.key === key
			})
			if (rowIndex != -1) {
				this.npmRunList.splice(rowIndex, 1)
				this.setFirstKey(key,rowIndex)
			}
		},
		setFirstKey(key,rowIndex){
			if(this.npmRunList.length === 0)return
			const nowRun= this.npmRunList[rowIndex - 1] || this.npmRunList[rowIndex + 1]
			if(nowRun)this.runKey = nowRun.key
			else this.runKey = this.npmRunList[0].key
		},
		deleteProject() {
			this.$confirm('此操作将关闭当前项目进行中任务,并从数据列表中删除, 是否继续?', '提示', {
				confirmButtonText: '确定',
				cancelButtonText: '取消',
				type: 'warning'
			}).then(() => {
					this.deleteMethods()
				}).catch(() => {})
		},
		deleteMethods() {
			let reslutList = []
			this.npmRunList.forEach((item, index) => {
				reslutList.push(this.$refs['cmdWindow' + index][0].back())
			})
			Promise.all(reslutList)
				.then(res => {
					console.log(res)
					this.$message.success('已关闭进行中任务，关闭项目成功')
					this.$emit('deleteProject', this.item.id_)
				})
				.catch(error => {
					this.$message.error(error.msg)
				})
		}
	}
}
</script>

<style scoped lang="scss">
.project {
	border: 1px solid #00d6b2;
	border-radius: 10px;
	overflow: hidden;
	padding: 5px 10px;
	min-width: 567px;
	margin-bottom: 15px;
	position: relative;
	.project-close {
		position: absolute;
		right: 10px;
		top: 10px;
		width: 20px;
		height: 20px;
		line-height: 20px;
		color: white;
		background-color: #F56C6C;
		padding: 10px; 
		font-size: 20px;
		font-weight: bold;
		display: flex;
		justify-content: center;
		align-items: center;
		border-radius: 50%;
		padding: 0px 10px 5px 10px;
		cursor: pointer;
	}
	.items {
		margin-top: 8px;
		display: flex;
		margin-bottom: 6px;
		align-items: center;
		flex: 1;
		.name {
			color: #6a6a6a;
			margin-right: 6px;
			width: 80px;
			text-align: right;
			flex: none;
		}
		.value {
			color: #35495e;
			font-weight: bold;
		}
		.address {
			cursor: pointer;
		}
	}
}

.script {
	display: flex;
	flex-wrap: wrap;
	.script-btn {
		margin-right: 15px;
		background-color: #4fc08d;
		color: white;
		padding: 5px 10px;
		cursor: pointer;
		border-radius: 10px;
		justify-content: center;
		align-items: center;
		margin-top: 5px;
		& :hover {
			color: #000000;
		}
	}
}
</style>
